<template>
  <PCard class="other-valueadded-services-con" :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="card-title">
      <span>其他增值服务</span>
    </div>
    <OtherValueAddedItem v-model="value" :dataList="dataList" :isRadio="true"></OtherValueAddedItem>
    <div class="item">
      <a-button type="primary" :disabled="saveBtndisabled" block @click="saveData">
        提交
      </a-button>
    </div>
  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbserviceEnterprise'
import OtherValueAddedItem from './OtherValueAddedItem.vue'
export default {
  name: 'OtherValueAddedServices',
  props: {
    coloseEvent: { type: Function },
    serviceInfo: { type: Object }
  },
  components: { OtherValueAddedItem },
  data() {
    return {
      value: [],
      dataList: [
        // { key: '1', name: '执照挂失1', desc: '业务描述', BusinessAttributes: '业务属性', BusinessExpenses: '需要支付费用', NeedUploadData: '需要上传资料' },
      ],
      detailData: {},
      saveBtndisabled:false
    }
  },
  watch: {
    serviceInfo: {
      handler(val) {
        if (this.isType.isObject(val) && !this.isType.isEmpty(val)) {
          // serviceInfo.data.id
          const { data: { id } } = val
          this.detailData = val.data
          this.getData4DB(id)
        }
      },
      deep: true,
      immediate: true
    },
    value: {
      handler(val) {
        if (this.isType.isArray(val) ) {
          if(this.isType.isEmpty(val)){
            this.saveBtndisabled = true
          }else{
            this.saveBtndisabled = false
          }
        }else{
          this.saveBtndisabled = true
        }
      },
      deep: true,
      immediate: true
    },

  },
  methods: {
    tjEvent() { },
    getData4DB(entId) {
      const param = {
        "data": {
          "entId": entId,
          // "name": "xxx",
          // "type": 1
        },
        "pageNo": 1,
        "pageSize": 100000
      }
      getDataForDB('增值业务配置-列表', param).then(res => {
        console.log('增值业务配置-列表===>', res);
        if (res.success) {
          const { result: { records } } = res
          if (this.isType.isArray(records)) {
            this.dataList = this.dataConversion(records)
          }
        } else {
          this.$message.warning(res.message || '增值业务配置-列表数据查询失败')
        }
      })
    },
    dataConversion(dataList) {
      // { key: '1', name: '执照挂失', desc: '业务描述', BusinessAttributes: '业务属性', BusinessExpenses: '业务费用', NeedUploadData: '需要上传资料' },
      const resArr = []
      dataList.forEach(item => {
        const { dataDescrpit, descrpit, id, name, needUploadData, needPay, type,payAmount } = item
        const typeList = { 1: '公开业务', 2: '隐藏业务', 0: '' }
        const BusinessExpenses = (needPay, payAmount) => {
          let res = ''
          if (needPay == '1') {
            res = `需要支付${Math.round(payAmount * 100) / 10000}元的费用`
          }
          return res
        }

        resArr.push({ key: id, name, desc: descrpit, BusinessAttributes: typeList[type] || '', BusinessExpenses: BusinessExpenses(needPay, payAmount), NeedUploadData: needUploadData == '1' ? dataDescrpit : '' })
      })
      return resArr
    },
    saveData() {
      const param = {
        "entId": this.detailData.id,
        "serviceIdAry": [...this.value]
      }
      console.log(param);
      getDataForDB('增值业务订单提交', param).then(res=>{
        console.log('增值业务订单提交====>',res);
        if(res.success){
          this.serviceInfo.index = 14
            this.coloseEvent({mesg:'数据保存成功！'})
        }else{
          this.$message.error(res.message||'增值业务订单提交数据保存失败')
        }
      })
    }
  }
}
</script>

<style lang="less">
.other-valueadded-services-con {
  width: 100%;

  .card-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }


}
</style>
